<template>
    <div class="bz-sub-container" ref="scrollable">
        <ring class="bz-p"></ring>
        <div class="bz-panel bz-panel-default">
            <div class="bz-panel-heading">
                <div class="bz-panel-title">Flex 布局是什么</div>
            </div>
            <div class="bz-panel-body">
                <div class="bz-paragraph">
                    Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
                </div>
                <pre v-highlightjs><code class="css">.box{
  display: flex;
}</code></pre>
                <div class="bz-paragraph">
                    行内元素也可以使用 Flex 布局。
                    <pre v-highlightjs><code class="css">.box{
  display: inline-flex;
}</code></pre>
                </div>
                <div class="bz-paragraph text-warning">注意，设为 Flex 布局以后，子元素的<span class="bz-badge-secondary">float</span>、<span
                        class="bz-badge-secondary">clear</span>和<span class="bz-badge-secondary">vertical-align</span>属性将失效。
                </div>
                <div class="bz-paragraph">
                    采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
                </div>
            </div>
        </div>

        <div class="bz-panel bz-panel-info">
            <div class="bz-panel-heading">基本概念</div>
            <div class="bz-panel-body">
                <div class="bz-paragraph">
                    采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
                </div>
                <div class="bz-paragraph">
                    <img src="../assets/images/main.png" alt="" class="bz-code-img">
                </div>
                <div class="bz-paragraph">
                    容器默认存在两根轴：水平的主轴（<span class="bz-badge-secondary">main axis</span>）和垂直的交叉轴（<span
                        class="bz-badge-secondary">cross axis</span>）。主轴的开始位置（与边框的交叉点）叫做<span
                        class="bz-badge-secondary">main start</span>，结束位置叫做 <span
                        class="bz-badge-secondary">main end</span>；交叉轴的开始位置叫做 <span class="bz-badge-secondary">cross start</span>，结束位置叫做<span
                        class="bz-badge-secondary">cross end</span>。
                    项目默认沿主轴排列。单个项目占据的主轴空间叫做 <span class="bz-badge-secondary">main size</span>，占据的交叉轴空间叫做<span
                        class="bz-badge-secondary">cross size</span>。
                </div>
            </div>
        </div>

        <div class="bz-panel bz-panel-default">
            <div class="bz-panel-heading text-success">
                容器的属性
            </div>
            <div class="bz-panel-body">
                <div class="bz-paragraph">
                    <ul class="bz-code">
                        <li>flex-direction</li>
                        <li>flex-wrap</li>
                        <li>flex-flow</li>
                        <li>justify-content</li>
                        <li>align-items</li>
                        <li>align-content</li>
                    </ul>
                </div>
                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">
                        flex-direction属性
                    </div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                <pre v-highlightjs=""><code class="css">.box {
  display:flex;
  flex-direction: row | row-reverse | column | column-reverse;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img class="bz-code-img" src="../assets/images/flex-direction.png" alt="">
                        </div>
                        <div class="bz-paragraph">
                            <ul class="bz-code">
                                <li>row（默认值）：主轴为水平方向，起点在左端。</li>
                                <li>row-reverse：主轴为水平方向，起点在右端。</li>
                                <li>column：主轴为垂直方向，起点在上沿。</li>
                                <li>column-reverse：主轴为垂直方向，起点在下沿。</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex-wrap属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/flex-wrap.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            (1) <span class="bz-badge-secondary">nowrap</span>（默认）：不换行。
                            <div class="bz-paragraph">
                                <img src="../assets/images/flex-wrap-1.png" alt="" class="bz-code-img">
                            </div>
                            <div class="bz-paragraph">
                                (2) <span class="bz-badge-secondary">wrap</span>：换行，第一行在上方。
                            </div>
                            <div class="bz-paragraph">
                                <img src="../assets/images/flex-wrap-2.jpg" alt="" class="bz-code-img">
                            </div>
                            <div class="bz-paragraph">
                                (3) <span class="bz-badge-secondary">wrap-reverse</span>：换行，第一行在下方。
                            </div>
                            <div class="bz-paragraph">
                                <img src="../assets/images/flex-wrap-3.jpg" alt="" class="bz-code-img">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">flex-flow属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">flex-flow</span>属性是 <span class="bz-badge-secondary">flex-direction</span>属性和
                            <span class="bz-badge-secondary">flex-wrap</span>属性的简写形式，<span class="bz-badge-secondary">row nowrap</span>
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.box {
  flex-flow: &lt;flex-direction&gt; || &lt;flex-wrap&gt;;
}</code></pre>
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">justify-content属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">justify-content</span>属性定义了项目在主轴上的对齐方式。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/justify-content.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
                        </div>
                        <div class="bz-paragraph">
                            <ul class="bz-code">
                                <li>flex-start（默认值）：左对齐</li>
                                <li>flex-end：右对齐</li>
                                <li>center： 居中</li>
                                <li>space-between：两端对齐，项目之间的间隔都相等。</li>
                                <li>space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">align-items属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">align-items</span>属性定义项目在交叉轴上如何对齐。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/align-items.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
                            <ul class="bz-code">
                                <li>flex-start：交叉轴的起点对齐。</li>
                                <li>flex-end：交叉轴的终点对齐。</li>
                                <li>center：交叉轴的中点对齐。</li>
                                <li>baseline: 项目的第一行文字的基线对齐。</li>
                                <li>stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="bz-panel bz-panel-info">
                    <div class="bz-panel-heading">align-content属性</div>
                    <div class="bz-panel-body">
                        <div class="bz-paragraph">
                            <span class="bz-badge-secondary">align-content</span>属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
                        </div>
                        <div class="bz-paragraph">
                            <pre v-highlightjs=""><code class="css">.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}</code></pre>
                        </div>
                        <div class="bz-paragraph">
                            <img src="../assets/images/align-content.png" alt="" class="bz-code-img">
                        </div>
                        <div class="bz-paragraph">
                            该属性可能取6个值。
                            <ul class="bz-code">
                                <li>flex-start：与交叉轴的起点对齐。</li>
                                <li>flex-end：与交叉轴的终点对齐。</li>
                                <li>center：与交叉轴的中点对齐。</li>
                                <li>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</li>
                                <li>space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</li>
                                <li>stretch（默认值）：轴线占满整个交叉轴。</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import Ring from "./Ring";

    export default {
        name: "Flex",
        components: {ring: Ring},
        mounted() {
        }
    }
</script>

<style lang="less" scoped>
    @import "../assets/style/flex";
    .bz-p{
        position: fixed;
        top: 130px;
        left: 250px;
    }
</style>
